<template>
  <header class="axiom-pc-app-header">
    <div class="header-left">
      <axiom-icon v-if="showSidebarToggle" name="fas fa-bars" class="sidebar-toggle" @click="onToggleSidebar" />
      <slot name="brand">
        <div class="default-brand">
          <axiom-icon :name="appIcon" size="24" />
          <span class="app-title">{{ appTitle }}</span>
        </div>
      </slot>
    </div>
    <div class="header-center">
      <slot name="navigation"></slot>
    </div>
    <div class="header-right">
      <slot name="actions">
        <div class="default-actions">
          <axiom-theme-switch />
        </div>
      </slot>
    </div>
  </header>
</template>

<script>
import AxiomIcon from '../common/AxiomIcon.vue'
import AxiomThemeSwitch from '../common/AxiomThemeSwitch.vue'
export default {
  name: 'AxiomPCAppHeader',
  components: {
    AxiomIcon,
    AxiomThemeSwitch,
  },
  props: {
    appTitle: {
      type: String,
      default: 'Axiom-View',
    },
    appIcon: {
      type: String,
      default: 'logo', // 假设我们有一个默认的 logo 图标
    },
    showSidebarToggle: {
      type: Boolean,
      default: true,
    }
  },
  emits: ['toggle-sidebar'],
  methods: {
    onToggleSidebar() {
      this.$emit('toggle-sidebar')
    },
  },
}
</script> 